<template>
  <header class="header">
    <!-- 定位坐标 -->
    <div class="location">
      <van-icon name="location-o" size="20" />
      <span>卓越世纪中心</span>
      <van-icon name="arrow" />
    </div>
    <!-- 搜索框 -->
    <!-- 搜索吸顶组件嵌套 -->
    <Search></Search>
    <!-- <van-sticky>
      <div class="search">
        <input type="text" placeholder="请输入商家或商品名称" />
        <van-icon class="searchIcon" name="search" />
        <button>搜索</button>
      </div>
    </van-sticky> -->
  </header>
</template>

<script>
import { defineComponent } from 'vue'
import Search from '@/components/foodContent/search.vue'

export default defineComponent({
  components: {
    Search
  }
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  height: 0.875rem;
  background-color: #ffcc33;
  padding-top: 0.06rem;
}
.location {
  padding-left: 0.1rem;
  height: 0.35rem;
  display: flex;
  align-items: center;
  span {
    font-weight: 550;
    font-size: 0.17rem;
  }
}
// .search {
//   height: 0.54rem;
//   background-color: #ffcc33;
//   display: flex;
//   padding: 0 0.12rem;
//   position: relative;
//   .searchIcon {
//     position: absolute;
//     top: 33%;
//     left: 6%;
//   }
//   button {
//     width: 0.6rem;
//     height: 0.31rem;
//     position: absolute;
//     border-radius: 0.2rem;
//     border: 0;
//     background: #ffcc33;
//     position: absolute;
//     top: 0.12rem;
//     right: 0.17rem;
//   }
// }
// .search input {
//   margin-top: 0.09rem;
//   width: 3.9rem;
//   height: 0.38rem;
//   border: 0;
//   border-radius: 0.2rem;
//   padding-left: 0.38rem;
//   font-size: 0.14rem;
// }
</style>
